<template>
	<div class="role" v-if="dialogFormVisible">
		<el-dialog :title="title" :visible="dialogFormVisible" :close-on-click-modal="false" width="800px" :before-close="handleClose">
			<div class="tab">
				<el-form ref="form" :rules="rules" :model="form" label-width="100px">
					<el-form-item label="项目" prop="project">
						<el-select v-model="form.project" :disabled="num == 2 || num == 4" placeholder="请选择项目" style="width:100%;" >
							<el-option
								v-for="(item,index) in project_list"
								:key="index"
								:label="item.name"
								:value="item.name">
							</el-option>
						</el-select>
					</el-form-item>

					<el-form-item label="问题类型" prop="problem_type">
						<el-select v-model="form.problem_type" :disabled="num == 2 || num == 4" placeholder="请选择问题类型" style="width:100%;" >
							<el-option
								v-for="(item,index) in problem_type_list"
								:key="index"
								:label="item.name"
								:value="item.name">
							</el-option>
						</el-select>
					</el-form-item>

					<el-form-item label="概要" prop="outline">
						<el-input v-model="form.outline" :disabled="num == 2 || num == 4" placeholder="请输入概要"></el-input>
					</el-form-item>

					<el-form-item label="模块" prop="module">
						<el-select v-model="form.module" :disabled="num == 2 || num == 4" placeholder="请选择模块" style="width:100%;" >
							<el-option
								v-for="(item,index) in module_list"
								:key="index"
								:label="item.name"
								:value="item.name">
							</el-option>
						</el-select>
					</el-form-item>

					<el-form-item label="优先级" prop="module">
						<el-select v-model="form.priority" :disabled="num == 2 || num == 4" placeholder="请选择优先级" style="width:100%;" >
							<el-option
								v-for="(item,index) in priority_list"
								:key="index"
								:label="item.name"
								:value="item.name">
							</el-option>
						</el-select>
					</el-form-item>

					<el-form-item label="销售区域" >
						<el-select v-model="form.area" :disabled="num == 2 || num == 4" placeholder="请选择销售区域" style="width:100%;" >
							<el-option
								v-for="(item,index) in area_list"
								:key="index"
								:label="item.name"
								:value="item.name">
							</el-option>
						</el-select>
					</el-form-item>

					<el-form-item label="出现概率" >
						<el-select v-model="form.probability" :disabled="num == 2 || num == 4" placeholder="请选择出现概率" style="width:100%;" >
							<el-option
								v-for="(item,index) in probability_list"
								:key="index"
								:label="item.name"
								:value="item.name">
							</el-option>
						</el-select>
					</el-form-item>

					<el-form-item label="类别" >
						<el-select v-model="form.type" :disabled="num == 2 || num == 4" placeholder="请选择类别" style="width:100%;" >
							<el-option
								v-for="(item,index) in type_list"
								:key="index"
								:label="item.name"
								:value="item.name">
							</el-option>
						</el-select>
					</el-form-item>

					<el-form-item label="BUG类型" >
						<el-select v-model="form.bug_type" :disabled="num == 2 || num == 4" placeholder="请选择BUG类型" style="width:100%;" >
							<el-option
								v-for="(item,index) in bug_type_list"
								:key="index"
								:label="item.name"
								:value="item.name">
							</el-option>
						</el-select>
					</el-form-item>

					<el-form-item label="平台" >
						<el-select v-model="form.os" :disabled="num == 2 || num == 4" placeholder="请选择平台" style="width:100%;" >
							<el-option
								v-for="(item,index) in os_type_list"
								:key="index"
								:label="item.name"
								:value="item.name">
							</el-option>
						</el-select>
					</el-form-item>

					<el-form-item label="固件版本" prop="firmware_version">
						<el-input v-model="form.firmware_version" :disabled="num == 2 || num == 4" placeholder="请输入固件版本"></el-input>
					</el-form-item>

					<el-form-item label="软件版本" prop="software_version">
						<el-input v-model="form.software_version" :disabled="num == 2 || num == 4" placeholder="请输入软件版本"></el-input>
					</el-form-item>

					<el-form-item label="米家服务器" >
						<el-select v-model="form.service" :disabled="num == 2 || num == 4" placeholder="请选择米家服务器" style="width:100%;" >
							<el-option
								v-for="(item,index) in service_list"
								:key="index"
								:label="item.name"
								:value="item.name">
							</el-option>
						</el-select>
					</el-form-item>

					<el-form-item label="发现版本" prop="discovery_version">
						<el-input v-model="form.discovery_version" :disabled="num == 2 || num == 4" placeholder="请输入发现版本"></el-input>
					</el-form-item>

					<el-form-item label="提交人" prop="submitter">
						<el-input v-model="form.submitter" :disabled="num == 2 || num == 4" placeholder="请输入提交人"></el-input>
					</el-form-item>

					<el-form-item label="处理人" prop="handler">
						<el-input v-model="form.handler" :disabled="num == 2 || num == 4" placeholder="请输入处理人"></el-input>
					</el-form-item>

					<el-form-item label="抄送人" prop="cc">
						<el-input v-model="form.cc" :disabled="num == 2 || num == 4" placeholder="请输入抄送人"></el-input>
					</el-form-item>

					<el-form-item label="详细描述" prop="desc">
						<el-input type="textarea" :disabled="num == 2 || num == 4" :rows="5" v-model="form.desc" placeholder="请输入详细描述"></el-input>
					</el-form-item>

					<el-form-item label="附件文档" v-if="num == 1 || num == 5">
						<el-upload
							class="upload-demo"
							action="string"
							:headers="headers"
							:http-request="uploadFile"
							:on-remove="deleteFile"
							:before-upload="beforeUpload">
							<el-button size="small" type="primary">附件上传</el-button>
						</el-upload>
					</el-form-item>

					<el-form-item v-if="num == 2 || num == 4" label="附件文档">
						<div v-for="(item,index) in form.doc" :key="index">
							<span @click="doc(item['id'])">文件名：<a :href="item['full_path']" >{{item['file_name']}}</a></span>
<!--							<span style="margin: 0 20px;">下载次数：{{item['download_count']}}</span>-->
						</div>
					</el-form-item>



				</el-form>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="handleClose">取 消</el-button>
				<el-button type="primary" @click="add('form')" v-if="num == 1 || num == 3 || num == 5">提 交</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { bugOptions, bugPost, bugResubimit, bugId } from '@/api/user'
import { getName } from '@/utils/auth'
import axios from "axios";

export default {
	name: 'addForm',
	data(){
		return {
			headers:{'Content-Type':'multipart/form-data'},
			dialogFormVisible:false,
			form:{
				submitter:'',
				outline:'',
				desc:''
			},
			id:'',
			fatherId:'',
			rules:{
				project:[
					{max: 36, message: '项目不能超过36个字符', trigger: 'blur'},
					{ required: true, message: '请选择项目', trigger: 'blur' }
					],
				module:[{max: 500, message: '项目不能超过500个字符', trigger: 'blur'}],
				priority:[{max: 500, message: '项目不能超过500个字符', trigger: 'blur'}],
				desc:[{max: 500, message: '项目不能超过500个字符', trigger: 'blur'}],
				firmware_version:[{max: 500, message: '固件版本不能超过500个字符', trigger: 'blur'}],
				software_version:[{max: 500, message: '软件版本不能超过500个字符', trigger: 'blur'}],
				discovery_version:[{max: 500, message: '发现版本不能超过500个字符', trigger: 'blur'}],
				cc:[{max: 200, message: '抄送人不能超过200个字符', trigger: 'blur'}],
				submitter:[{max: 36, message: '提交人不能超过36个字符', trigger: 'blur'}],
				handler:[{max: 36, message: '处理人不能超过36个字符', trigger: 'blur'}],
				problem_type:{ required: true, message: '请选择问题类型', trigger: 'blur' },
				outline:[
					{max: 200, message: '概要不能超过200个字符', trigger: 'blur'},
					{ required: true, message: '请输入概要', trigger: 'blur' }
					]
			},
			options:{},
			optionsLeader:{},
			num:0,
			title:'新增缺陷',
			project_list:[], // 项目
			problem_type_list:[],  //问题类型
			module_list:[], // 模块
			priority_list:[],  // 优先级
			area_list:[], //销售区域
			probability_list:[], //出现概率
			type_list:[],  // 类别
			bug_type_list:[],  // BUG类型
			os_type_list:[],  // 平台
			service_list:[],  // 米家服务器
			fileArr:[] // 文件列表
		}
	},
	created() {

	},
	methods:{
		handleClose(){
			this.dialogFormVisible = false
			this.form = {
				submitter:'',
				outline:''
			}
			this.project_list=[] // 项目
			this.problem_type_list=[]  //问题类型
			this.module_list=[] // 模块
			this.priority_list=[]  // 优先级
			this.area_list=[] //销售区域
			this.probability_list=[] //出现概率
			this.type_list=[]  // 类别
			this.bug_type_list=[]  // BUG类型
			this.os_type_list=[]  // 平台
			this.service_list=[]  // 米家服务器
		},
		deleteFile(file, fileList) {
			this.$message.success("成功移除!")
			this.fileArr.forEach((item,index) => {
				var arr = item.split('/')
				if(file.name == arr[arr.length-1] ){
					if(index != 0){
						this.fileArr.splice(index,index)
					}else {
						this.fileArr = []
					}
				}
			})
		},
		beforeUpload(file){
			var type = file.name
			type = type.split('.')[1]
		},
		//上传附件
		uploadFile(file) {
			let arr = []
			let url= `${process.env.VUE_APP_KANBAN_HOST}/api/v1/file`
			let fd = new FormData();
			fd.append('file',file.file);
			axios({
				url:url,
				data: fd,
				method:'post',
			}).then(res => {
				if(res.data.code === 200) {
					this.$message.success("上传成功!")
					this.fileArr.push(res.data.data['key'])
				}
			})
		},
		add(form){
			this.$refs[form].validate((valid) => {
				if (valid) {

					this.form.doc = this.fileArr
					if(this.num == 1){
						this.form.task_case_id = this.id
						bugPost(this.form).then(res => {
							if(res.status == 'success'){
								this.$message.success(res.message)
								this.$emit('func',this.fatherId)
							}else {
								this.$message.error('创建失败！')
							}
						})
					}
					if(this.num == 3){
						this.form.task_case_id = this.id
						bugResubimit(this.form,this.form.id).then(res => {
							if(res.status == 'success'){
								this.$message.success(res.message)
								this.$emit('func',this.fatherId)
							}else {
								this.$message.error('编辑失败！')
							}
						})
					}

					if(this.num == 5){
						bugPost(this.form).then(res => {
							if(res.status == 'success'){
								this.$message.success(res.message)
								this.$emit('func')
							}else {
								this.$message.error('创建失败！')
							}
						})
					}

					this.dialogFormVisible = false
					this.form ={
						submitter:'',
						outline:''
					}
					this.project_list=[] // 项目
					this.problem_type_list=[]  //问题类型
					this.module_list=[] // 模块
					this.priority_list=[]  // 优先级
					this.area_list=[] //销售区域
					this.probability_list=[] //出现概率
					this.type_list=[]  // 类别
					this.bug_type_list=[]  // BUG类型
					this.os_type_list=[]  // 平台
					this.service_list=[]  // 米家服务器

				} else {
					return false;
				}
			});

		},
		getOption(){
			bugOptions().then(res => {
				res.data.project_list.filter(item => {
					this.project_list.push({name:item})
				})

				res.data.problem_type_list.filter(item => {
					this.problem_type_list.push({name:item})
				})

				res.data.module_list.filter(item => {
					this.module_list.push({name:item})
				})

				res.data.priority_list.filter(item => {
					this.priority_list.push({name:item})
				})

				res.data.area_list.filter(item => {
					this.area_list.push({name:item})
				})

				res.data.probability_list.filter(item => {
					this.probability_list.push({name:item})
				})

				res.data.type_list.filter(item => {
					this.type_list.push({name:item})
				})

				res.data.bug_type_list.filter(item => {
					this.bug_type_list.push({name:item})
				})

				res.data.os_type_list.filter(item => {
					this.os_type_list.push({name:item})
				})

				res.data.service_list.filter(item => {
					this.service_list.push({name:item})
				})

				// console.log(res,121212)
			})
		},
		initData(num,data,formData,id){
			this.num = num
			if(data != undefined){
				this.id = data.id
			}else {
				this.id = ''
			}
			this.fatherId = id

			if(num == 1){
				this.getOption()
				this.form.submitter = getName()
				this.form.outline = '['+formData.product['name']+']'+' ['+formData.project_name+'] '+data.case['case_name']
				this.form.desc = data.remark
			}
			// 查看
			if(num == 2){
				this.title='查看'
				this.form = Object.assign({},data)
			}
			// 编辑
			if(num == 3){
				this.title='编辑'
				this.getOption()
				this.form = Object.assign({},data)
			}
			// 缺陷已提交查看
			if(num == 4){
				this.title='查看'
				bugId(data.bug_id).then(res => {
					this.form = Object.assign({},res.data)
				})
			}

			// 在列表页新增bug
			if(num == 5){
				this.getOption()
			}
		}
	}

}
</script>

<style lang="scss" scoped>
.role{
	//.tab{
	//	width: 450px;
	//	margin: 0 0 0 40px;
	//}
}
</style>
